<template>
  <div class="hello">
    <h1>这是bus测试</h1>

    <dome-one></dome-one>
    <dome-two></dome-two>

    <hr />

    <h4>作品地址：</h4>
    <textarea id="text" @click="copy"></textarea>
    <button class="btn" @click="copy">复制</button>

    <hr />

    <h1>Echarts报表使用</h1>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;border:1px solid red"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import domeOne from "./demo01";
import domeTwo from "./demo02";

export default {
  name: "HelloWorld",
  components: {
    domeOne,
    domeTwo
  },
  mounted() {
    this.init("main");
  },
  data() {
    return {
      charts: ""
    };
  },
  methods: {
    copy() {
      let text = document.getElementById("text");
      text.select();
      document.execCommand("Copy");
    },

    init(id) {
      var xData = ["周一", "周二", "周三", "周四", "周五", "周六", "周天"];
      var yData1 = [20, 30, 40, 50, 45, 35, 25];
      // for (let item of this.showData) {
      //   xData.push(item.task_time)
      //   yData1.push(parseFloat(item.successRate).toFixed(2))
      // }
      // if (!xData.length) {
      //   xData.push(this.currDate)
      //   yData1.push(0)
      // }
      var option = {
        tooltip: {
          // 提示框组件。
          trigger: "axis", // 触发类型  axis 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
          axisPointer: {
            // 坐标轴指示器配置项
            type: "cross" // 指示类型  cross 十字准星指示器
          }
        },
        legend: {
          // 图例组件。
          x: "right", // x y轴位置
          y: "0px",
          textStyle: {
            // 文字样式
            color: "blue", // 文字颜色
            fontSize: 13 // 文字大小
          },
          icon: "circle", // 图标样式
          data: ["成功率"] // 图例的数据数组。
        },
        grid: {
          // 直角坐标系内绘图网格
          right: "10%", // 距离右侧多大
          bottom: "4%",
          left: "4%",
          top: "14%",
          containLabel: true // grid 区域是否包含坐标轴的刻度标签
        },
        dataZoom: [
          //  组件 用于区域缩放
          {
            type: "slider",
            show: true, // 是否显示！
            height: 20, // 高度
            left: "10%", // 距离左侧位置
            right: "10%",
            bottom: "2%",
            start: 50, // 开始位置
            end: 100, // 结束位置
            textStyle: {
              // 字体样式
              color: "#d4ffff", // 字体颜色
              fontSize: 11 // 字体大小
            }
          },
          {
            type: "inside" // 可以拖拽
          }
        ],
        xAxis: [
          // 直角坐标系 grid 中的 x 轴
          {
            type: "category", // 坐标轴类型。
            data: xData, // 数据
            name: "时间",
            nameTextStyle: {
              // 坐标轴名称的样式
              color: "green"
            },
            axisLine: {
              // 坐标轴轴线相关设置
              lineStyle: {
                // 坐标轴轴线样式
                color: "yellow"
              }
            },
            axisTick: {
              // 坐标轴刻度相关设置。
              show: true
            },
            axisLabel: {
              // 坐标轴刻度标签的相关设置。
              show: true,
              textStyle: {
                color: "#444",
                fontSize: 12
              }
            }
          }
        ],
        yAxis: [
          // // 直角坐标系 grid 中的 y 轴
          {
            type: "value", // value 数值轴，适用于连续数据。
            name: "成功率", // 坐标轴名称
            nameTextStyle: {
              // 坐标轴名称的文字样式。
              color: "#d4ffff"
            },
            position: "left", //  y 轴的位置
            axisLine: {
              lineStyle: {
                color: "#777"
              }
            },
            splitLine: {
              lineStyle: {
                color: "#777"
              }
            },
            axisLabel: {
              color: "#354",
              fontSize: 12
            }
          }
        ],
        series: [
          {
            name: "成功率",
            type: "line",
            yAxisIndex: 0,
            symbolSize: 12,
            itemStyle: {
              normal: {
                color: "#ff3535"
              }
            },
            data: yData1
          }
        ]
      };
      // 下面的判断是为了决定dataZoom的使用，当数据量小的时候不需要滚动，数据量大在显示，我设的是超过10个数据就显示
      if (xData.length <= 10) {
        option.dataZoom[0].show = false;
        option.dataZoom[0].start = 0;
      } else {
        option.dataZoom[0].show = true;
        option.dataZoom[0].start = 100 - (10 / xData.length) * 100;
      }
      // 初始化图表
      this.charts = echarts.init(document.getElementById(id));
      // 清除图表旧数据
      this.charts.clear();
      // 重新加载新数据
      this.charts.setOption(option);
    }
  }
};
</script>

<style scoped lang="scss">
</style>
